<!--
 * @Autor: 黄旗
 * @Date: 2020-07-22 09:36:49
-->
<template>
    <div>
        <Row :gutter="16">
            <Col span="12">
                <Card>
                    <h4>{{ projectmonth }}月 {{ title[0] }}</h4>
                    <Row
                        type="flex"
                        justify="start"
                        :gutter="16"
                        class="ivu-mt-8 ivu-mb-8"
                    >
                        <Col>
                            <DatePicker
                                v-model="projecttime"
                                placement="bottom-end"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="请选择日期"
                                style="width: 120px"
                                :clearable="false"
                                @on-change="askDatasproject"
                            ></DatePicker>
                        </Col>
                        <Col>
                            <ButtonGroup>
                                <Button
                                    :type="
                                        projectparams.type === 2
                                            ? 'primary'
                                            : null
                                    "
                                    @click="projectbut(2)"
                                    >上旬</Button
                                >
                                <Button
                                    :type="
                                        projectparams.type === 3
                                            ? 'primary'
                                            : null
                                    "
                                    @click="projectbut(3)"
                                    >中上旬</Button
                                >
                                <Button
                                    :type="
                                        projectparams.type === 4
                                            ? 'primary'
                                            : null
                                    "
                                    @click="projectbut(4)"
                                    >全月</Button
                                >
                            </ButtonGroup>
                        </Col>
                        <Col>
                            <Select
                                @on-change="askDataproject"
                                :max-tag-count="3"
                                v-model="projectparams.diseases_id"
                                multiple
                                clearable
                                placeholder="请选择病种"
                                style="minWidth:160px"
                            >
                                <Option
                                    v-for="item in diseaseslist"
                                    :value="item.id"
                                    :key="item.id"
                                    >{{ item.name }}</Option
                                >
                            </Select>
                        </Col>
                        <Col>
                            <Select
                                @on-change="askDataproject"
                                v-model="projectparams.check_type"
                                placeholder="请选择筛选字段"
                                style="width:120px"
                            >
                                <Option
                                    v-for="item in porjectlist"
                                    :value="item.value"
                                    :key="item.value"
                                    >{{ item.label }}</Option
                                >
                            </Select>
                        </Col>
                    </Row>
                    <Table :columns="columnsproject" :data="projectdata">
                        <template slot-scope="{ row }" slot="ranking">
                            <span v-if="+row.rank > 0">
                                <Icon
                                    style="color:#45b586"
                                    type="md-arrow-dropup"
                                />{{ row.rank }}
                            </span>
                            <span v-else-if="+row.rank < 0">
                                <Icon
                                    style="color:#ed4014"
                                    type="md-arrow-dropdown"
                                />{{ row.rank * -1 }}
                            </span>
                            <span v-else>{{ row.rank }}</span>
                        </template>
                        <template slot-scope="{ row }" slot="action">
                            <span
                                v-if="+row.status === 1"
                                class="enable"
                                @click="operatefun(row, true)"
                                >详细</span
                            >
                            <span v-else class="disabled">详细</span>
                        </template>
                    </Table>
                    <Spin size="large" fix v-if="projectloading"></Spin>
                </Card>
            </Col>
            <Col span="12">
                <Card>
                    <h4>{{ doctormonth }}月{{ title[1] }}</h4>
                    <Row
                        type="flex"
                        justify="start"
                        :gutter="16"
                        class="ivu-mt-8 ivu-mb-8"
                    >
                        <Col>
                            <DatePicker
                                v-model="doctortime"
                                placement="bottom-end"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="请选择日期"
                                style="width: 120px"
                                :clearable="false"
                                @on-change="askDatasdoctor"
                            ></DatePicker>
                        </Col>
                        <Col>
                            <ButtonGroup>
                                <Button
                                    :type="
                                        doctorparams.type === 2
                                            ? 'primary'
                                            : null
                                    "
                                    @click="doctorbut(2)"
                                    >上旬</Button
                                >
                                <Button
                                    :type="
                                        doctorparams.type === 3
                                            ? 'primary'
                                            : null
                                    "
                                    @click="doctorbut(3)"
                                    >中上旬</Button
                                >
                                <Button
                                    :type="
                                        doctorparams.type === 4
                                            ? 'primary'
                                            : null
                                    "
                                    @click="doctorbut(4)"
                                    >全月</Button
                                >
                            </ButtonGroup>
                        </Col>
                        <Col>
                            <Select
                                @on-change="askDatadoctor"
                                :max-tag-count="3"
                                v-model="doctorparams.diseases_id"
                                multiple
                                clearable
                                placeholder="请选择病种"
                                style="minWidth:160px"
                            >
                                <Option
                                    v-for="item in diseaseslist"
                                    :value="item.id"
                                    :key="item.id"
                                    >{{ item.name }}</Option
                                >
                            </Select>
                        </Col>
                        <Col>
                            <Select
                                @on-change="askDatadoctor"
                                v-model="doctorparams.check_type"
                                placeholder="请选择筛选字段"
                                style="width:120px"
                            >
                                <Option
                                    v-for="item in porjectlist"
                                    :value="item.value"
                                    :key="item.value"
                                    >{{ item.label }}</Option
                                >
                            </Select>
                        </Col>
                    </Row>
                    <Table :columns="columnsdoctor" :data="doctordata">
                        <template slot-scope="{ row }" slot="ranking">
                            <span v-if="+row.rank > 0">
                                <Icon
                                    style="color:#45b586"
                                    type="md-arrow-dropup"
                                />{{ row.rank }}
                            </span>
                            <span v-else-if="+row.rank < 0">
                                <Icon
                                    style="color:#ed4014"
                                    type="md-arrow-dropdown"
                                />{{ row.rank * -1 }}
                            </span>
                            <span v-else>{{ row.rank }}</span>
                        </template>
                        <template slot-scope="{ row }" slot="action">
                            <span
                                v-if="+row.status === 1"
                                class="enable"
                                @click="operatefuns(row, false)"
                                >详细</span
                            >
                            <span v-else class="disabled">详细</span>
                        </template>
                    </Table>
                    <Spin size="large" fix v-if="doctorloading"></Spin>
                </Card>
            </Col>
        </Row>
        <Drawer
            :title="`${month}月 ${name}运营详细表`"
            width="1080"
            v-model="operate"
            @on-close="closedrawer"
        >
            <Row
                type="flex"
                justify="start"
                :gutter="16"
                class="ivu-mt-8 ivu-mb-8"
            >
                <Col>
                    <DatePicker
                        v-model="operatetime"
                        format="yyyy-MM-dd"
                        type="date"
                        transfer
                        :clearable="false"
                        placement="bottom-end"
                        placeholder="请选择日期"
                        @on-change="askDatasoperate"
                        style="width: 200px"
                    ></DatePicker>
                </Col>
                <Col>
                    <ButtonGroup>
                        <Button
                            :type="operateparams.type === 2 ? 'primary' : null"
                            @click="operatebut(2)"
                            >上旬</Button
                        >
                        <Button
                            :type="operateparams.type === 3 ? 'primary' : null"
                            @click="operatebut(3)"
                            >中上旬</Button
                        >
                        <Button
                            :type="operateparams.type === 4 ? 'primary' : null"
                            @click="operatebut(4)"
                            >全月</Button
                        >
                    </ButtonGroup>
                </Col>
                <Col>
                    <Select
                        @on-change="askDataoperate"
                        v-model="operateparams.project_id"
                        placeholder="请选择项目"
                        style="width:200px"
                    >
                        <Option
                            v-for="item in porjectlists"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.name }}</Option
                        >
                    </Select>
                </Col>
            </Row>
            <Table
                v-if="operate"
                :columns="columnsoperate"
                :data="operatedata"
                @on-sort-change="sortchange"
            >
                <template slot-scope="{ row }" slot="loss_rate">
                    <span>{{ parseInt(Number(row.loss_rate) * 100 + 0.1) + "%"}}</span>
                </template>
            </Table>
            <Spin size="large" fix v-if="operateloading"></Spin>
        </Drawer>
    </div>
</template>

<script>
import {
    projectreportgetparentdiseases,
    projectreportprojectreport,
    projectreportdoctorreport,
    doctorlist,
} from "@/api/project_ranking";
import dayjs from "dayjs";
export default {
    data() {
        return {
            title: ["项目排行", "医生排行"],
            projectparams: {
                start_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                end_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                check_type: 1,
                type: 1,
                diseases_id: [],
            },
            doctorparams: {
                start_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                end_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                check_type: 1,
                type: 1,
                diseases_id: [],
            },
            operateparams: {
                project_id: "",
                start_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                end_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                type: 1,
                sort_column: "",
                sort_type: null,
                page: 0,
                pageSize: 0,
            },
            porjectlist: [
                { value: 1, label: "总业绩" },
                { value: 2, label: "挂号人均" },
                { value: 3, label: "初诊人数" },
                { value: 4, label: "初诊人均" },
                { value: 5, label: "复诊人数" },
                { value: 6, label: "复诊人均" },
                { value: 7, label: "总人均" },
                { value: 8, label: "308人均使用" },
                { value: 9, label: "308人均购买" },
            ],
            porjectlists: [],
            projecttime: dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD"),
            projecttimes: dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD"),
            doctortime: dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD"),
            doctortimes: dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD"),
            operatetime: dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD"),
            operatetimes: dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD"),
            diseaseslist: [],
            projectdata: [],
            doctordata: [],
            operatedata: [],
            month: dayjs().format("MM"),
            projectmonth: dayjs().format("MM"),
            doctormonth: dayjs().format("MM"),
            projectloading: false,
            doctorloading: false,
            operateloading: false,
            columnsproject: [
                {
                    title: "排名",
                    width: 80,
                    type: "index",
                },
                {
                    title: "项目",
                    key: "name",
                },
                {
                    title: "上月排名",
                    slot: "ranking",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            columnsdoctor: [
                {
                    title: "排名",
                    width: 80,
                    type: "index",
                },
                {
                    title: "医生",
                    key: "name",
                },
                {
                    title: "上月排名",
                    slot: "ranking",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            columnsoperate: [
                {
                    title: "医生",
                    key: "doctor_name",
                    fixed: "left",
                    width: 100,
                },
                {
                    title: "挂号人数",
                    key: "reg_num",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "挂号收入",
                    key: "reg_money",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "挂号人均",
                    key: "reg_avg_money",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "流失人数",
                    key: "loss_num",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "流失率",
                    slot: "loss_rate",
                    sortable: "custom",
                    width: 100,
                },
                {
                    title: "初诊人数",
                    key: "first_reg_num",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "初诊收入",
                    key: "first_money",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "初诊人均",
                    key: "first_avg_money",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "复诊人数",
                    key: "again_reg_num",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "复诊收入",
                    key: "again_money",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "复诊人均",
                    key: "again_avg_money",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "总就诊人数",
                    key: "total_num",
                    sortable: "custom",
                    width: 130,
                },
                {
                    title: "总收入",
                    key: "total_money",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "总人均",
                    key: "total_avg_money",
                    sortable: "custom",
                    width: 100,
                },
                {
                    title: "308购买量",
                    key: "tmp_buy_clinic_num",
                    sortable: "custom",
                    width: 135,
                },
                {
                    title: "308人均使用",
                    key: "tmp_treament_avg_num",
                    sortable: "custom",
                    width: 135,
                },
                {
                    title: "308人均购买",
                    key: "tmp_buy_avg_num",
                    sortable: "custom",
                    width: 135,
                },
            ],
            name: true,
            operate: false,
        };
    },
    methods: {
        initial() {
            projectreportgetparentdiseases().then((res) => {
                this.diseaseslist = res;
            });
            this.askDataproject();
            this.askDatadoctor();
        },
        askDataproject() {
            let params = JSON.parse(JSON.stringify(this.projectparams));
            params.diseases_id = this.projectparams.diseases_id.join(",");
            this.projectloading = true;
            projectreportprojectreport(params).then((res) => {
                this.projectdata = res;
                this.projectloading = false;
            });
        },
        askDatadoctor() {
            let params = JSON.parse(JSON.stringify(this.doctorparams));
            params.diseases_id = this.doctorparams.diseases_id.join(",");
            this.doctorloading = true;
            projectreportdoctorreport(params).then((res) => {
                this.doctordata = res;
                this.doctorloading = false;
            });
        },
        askDatasproject() {
            this.projectmonth = dayjs(this.projecttime).format("MM")
            this.projectparams.type = 1
            this.projectparams.start_time = dayjs(this.projecttime).format(
                "YYYY-MM-DD"
            );
            this.projectparams.end_time = dayjs(this.projecttime).format(
                "YYYY-MM-DD"
            );
            this.askDataproject();
        },
        askDatasdoctor() {
            (this.doctormonth = dayjs(this.doctortime).format("MM")),
                (this.doctorparams.type = 1);
            this.doctorparams.start_time = dayjs(this.doctortime).format(
                "YYYY-MM-DD"
            );
            this.doctorparams.end_time = dayjs(this.doctortime).format(
                "YYYY-MM-DD"
            );
            this.askDatadoctor();
        },
        operatefun(row, bool) {
            console.log(5555)
            console.log(this.operateparams.type)
            this.operatetime = this.projecttime
            this.operatetimes = this.projecttime
            this.month = this.projectmonth
            this.operateparams.start_time = this.projectparams.start_time
            this.operateparams.end_time = this.projectparams.end_time
            this.operateparams.type = this.projectparams.type
            if (this.operateparams.type !== 1) {
                this.projectbut(this.operateparams.type)
            }

            // // operatetime
            // if (bool) {
            //     // this.operatetime = dayjs(this.projecttime).format("YYYY-MM-DD");
            //     // this.operatetimes = dayjs(this.projecttime).format("YYYY-MM-DD")||dayjs().format("YYYY-MM-DD");
            //     this.month = dayjs().format("MM");
            // } else {
            //     // this.operatetime = dayjs(this.doctortime).format("YYYY-MM-DD");
            //     // this.operatetimes = dayjs(this.doctortime).format("YYYY-MM-DD")||dayjs().format("YYYY-MM-DD");
            //     this.month = dayjs().format("MM");
            // }
            // this.operatetime = dayjs().subtract(1, "day").format("YYYY-MM-DD")
            // this.operatetimes = dayjs().subtract(1, "day").format("YYYY-MM-DD")
            this.name = row.project_name;
            this.operate = true;
            // this.month = dayjs().format('MM'),
            this.operateparams.project_id = row.project_id + "";
            this.askDataoperate();
        },
        operatefuns(row, bool) {
            console.log(666666666666)
            this.operatetime = this.doctortime
            this.operatetimes = this.doctortime
            this.month = this.doctormonth
            this.operateparams.start_time = this.doctorparams.start_time
            this.operateparams.end_time = this.doctorparams.end_time
            this.operateparams.type = this.doctorparams.type
            if (this.operateparams.type !== 1) {
                this.doctorbut(this.operateparams.type)
            }
            // // operatetime
            // if (bool) {
            //     // this.operatetime = dayjs(this.projecttime).format("YYYY-MM-DD");
            //     // this.operatetimes = dayjs(this.projecttime).format("YYYY-MM-DD")||dayjs().format("YYYY-MM-DD");
            //     this.month = dayjs().format("MM");
            // } else {
            //     // this.operatetime = dayjs(this.doctortime).format("YYYY-MM-DD");
            //     // this.operatetimes = dayjs(this.doctortime).format("YYYY-MM-DD")||dayjs().format("YYYY-MM-DD");
            //     this.month = dayjs().format("MM");
            // }
            // this.operatetime = dayjs().subtract(1, "day").format("YYYY-MM-DD")
            // this.operatetimes = dayjs().subtract(1, "day").format("YYYY-MM-DD")
            this.name = row.project_name;
            this.operate = true;
            // this.month = dayjs().format('MM'),
            this.operateparams.project_id = row.project_id + "";
            // this.askDataoperate();
        },
        projectbut(type) {
            this.projectparams.type = type;
            console.log(this.projectparams.type)
            if (this.projecttime !== "")
                this.projecttimes = JSON.parse(
                    JSON.stringify(this.projecttime)
                );
            let day = dayjs(this.projecttimes).format("YYYY-MM");
            let fristday = dayjs(`${day}-1`).format("YYYY-MM-DD");
            let second = dayjs(`${day}-10`).format("YYYY-MM-DD");
            let third = dayjs(`${day}-20`).format("YYYY-MM-DD");
            let all = dayjs(`${day}-1`)
                .add(1, "month")
                .subtract(1, "day")
                .format("YYYY-MM-DD");
            this.projecttime = "";
            if (type === 2) {
                this.projectparams.start_time = fristday;
                this.projectparams.end_time = second;
            } else if (type === 3) {
                this.projectparams.start_time = fristday;
                this.projectparams.end_time = third;
            } else if (type === 4) {
                this.projectparams.start_time = fristday;
                this.projectparams.end_time = all;
            }
            this.askDataproject();
        },
        doctorbut(type) {
            this.doctorparams.type = type;
            if (this.doctortime !== "")
                this.doctortimes = JSON.parse(JSON.stringify(this.doctortime));
            let day = dayjs(this.doctortimes).format("YYYY-MM");
            let fristday = dayjs(`${day}-1`).format("YYYY-MM-DD");
            let second = dayjs(`${day}-10`).format("YYYY-MM-DD");
            let third = dayjs(`${day}-20`).format("YYYY-MM-DD");
            let all = dayjs(`${day}-1`)
                .add(1, "month")
                .subtract(1, "day")
                .format("YYYY-MM-DD");
            this.doctortime = "";
            if (type === 2) {
                this.doctorparams.start_time = fristday;
                this.doctorparams.end_time = second;
            } else if (type === 3) {
                this.doctorparams.start_time = fristday;
                this.doctorparams.end_time = third;
            } else if (type === 4) {
                this.doctorparams.start_time = fristday;
                this.doctorparams.end_time = all;
            }
            this.askDatadoctor();
        },
        operatebut(type) {
            this.operateparams.type = type;
            let day = dayjs(this.operatetimes).format("YYYY-MM");
            let fristday = dayjs(`${day}-1`).format("YYYY-MM-DD");
            let second = dayjs(`${day}-10`).format("YYYY-MM-DD");
            let third = dayjs(`${day}-20`).format("YYYY-MM-DD");
            let all = dayjs(`${day}-1`).add(1, "month").subtract(1, "day").format("YYYY-MM-DD");
            console.log(day, fristday,second,third,all)
            this.operatetime = "";
            if (type === 2) {
                this.operateparams.start_time = fristday;
                this.operateparams.end_time = second;
            } else if (type === 3) {
                this.operateparams.start_time = fristday;
                this.operateparams.end_time = third;
            } else if (type === 4) {
                this.operateparams.start_time = fristday;
                this.operateparams.end_time = all;
            }
            this.askDataoperate();
        },
        askDatasoperate() {
            (this.month = dayjs(this.operatetime).format("MM")),
                (this.operatetimes = JSON.parse(
                    JSON.stringify(this.operatetime)
                ));
            this.operateparams.type = 1;
            this.operateparams.start_time = dayjs(this.operatetime).format(
                "YYYY-MM-DD"
            );
            this.operateparams.end_time = dayjs(this.operatetime).format(
                "YYYY-MM-DD"
            );
            this.askDataoperate();
        },
        askDataoperate() {
            this.operateloading = true;
            this.operatedata = [];
            doctorlist(this.operateparams).then((res) => {
                if (this.porjectlists.length === 0) {
                    this.porjectlists = res.condition.project_list;
                }
                this.operatedata = res.list;
                this.operatedata.push(res.total);
                this.operateloading = false;
            });
        },
        sortchange(column) {
            this.operateparams.sort_column = column.key;
            column.order === "asc"
                ? (this.operateparams.sort_type = 1)
                : column.order === "normal"
                ? (this.operateparams.sort_type = 0)
                : (this.operateparams.sort_type = 2);
            this.askDataoperate();
        },
        closedrawer() {
            this.operatetime = dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD");
            this.operateparams = {
                project_id: "",
                start_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                end_time: dayjs()
                    .subtract(1, "day")
                    .format("YYYY-MM-DD"),
                type: 1,
                sort_column: "",
                sort_type: null,
                page: 0,
                pageSize: 0,
            };
        },
    },
    mounted() {
        this.initial();
    },
};
</script>
<style lang="less">
.disabled {
    cursor: not-allowed;
    color: #ccc;
}
.enable {
    cursor: pointer;
    color: #49bf8d;
}
</style>
